<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../build/crocodoc.viewer.css" />
    <link rel="stylesheet" href="pop.css" />
    <link rel="stylesheet" href="fade.css" />
    <link rel="stylesheet" href="slide.css" />
    <link rel="stylesheet" href="spin.css" />
    <link rel="stylesheet" href="pageflip.css" />
    <link rel="stylesheet" href="carousel.css" />
    <script src="../../node_modules/jquery/dist/jquery.js"></script>
    <script src="../../build/crocodoc.viewer.js"></script>
    <style>
        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
            background: #222;
        }
        .viewer {
            height: 100%;
        }
        .crocodoc-page-inner {
            border: 1px solid #ccc;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
        }
        .crocodoc-page {
            padding: 50px;
        }
        .controls {
            position: fixed;
            bottom: 10px;
            left: 50%;
            margin-left: -150px;
            width: 300px;
            text-align: center;
        }
        button {
            background: #fafafa;
            border: 0;
        }
        button.selected {
            background: #999;
        }
        button:focus {
            outline: 0;
            box-shadow: 0 0 0 1px #aaa;
        }
    </style>
</head>
<body class="transition">
    <div class="viewer"></div>
    <div class="controls">
        <button class="pop" onclick="setMode('pop')">Pop</button>
        <button class="fade" onclick="setMode('fade')">Fade</button>
        <button class="carousel" onclick="setMode('carousel')">Carousel</button>
        <button class="spin" onclick="setMode('spin')">Spin</button>
        <button class="slide" onclick="setMode('slide')">Slide</button>
        <button class="book" onclick="setMode('book')">Book</button>
    </div>
    <script>
        var viewer,
            url = 'https://view-api.box.com/1/sessions/5a34f299b35947b5ac1e0b4d83553392/assets';

        function setMode(mode) {
            $('.controls button').removeClass('selected');
            $('.controls button.' + mode).addClass('selected');
            switch (mode) {
                case 'pop':
                    viewer.setLayout(Crocodoc.LAYOUT_PRESENTATION);
                    viewer.zoom(Crocodoc.ZOOM_AUTO);
                    $('body').removeClass().addClass('crocodoc-presentation-pop');
                    break;

                case 'fade':
                    viewer.setLayout(Crocodoc.LAYOUT_PRESENTATION);
                    viewer.zoom(Crocodoc.ZOOM_AUTO);
                    $('body').removeClass().addClass('crocodoc-presentation-fade');
                    break;

                case 'spin':
                    viewer.setLayout(Crocodoc.LAYOUT_PRESENTATION);
                    viewer.zoom(Crocodoc.ZOOM_AUTO);
                    $('body').removeClass().addClass('crocodoc-presentation-spin');
                    break;

                case 'slide':
                    viewer.setLayout(Crocodoc.LAYOUT_PRESENTATION);
                    viewer.zoom(Crocodoc.ZOOM_AUTO);
                    $('body').removeClass().addClass('crocodoc-presentation-slide');
                    break;

                case 'carousel':
                    viewer.setLayout(Crocodoc.LAYOUT_PRESENTATION);
                    viewer.zoom(Crocodoc.ZOOM_AUTO);
                    viewer.zoom(Crocodoc.ZOOM_OUT);
                    $('body').removeClass().addClass('crocodoc-presentation-carousel');
                    break;

                case 'book':
                    viewer.setLayout(Crocodoc.LAYOUT_PRESENTATION_TWO_PAGE);
                    viewer.zoom(Crocodoc.ZOOM_AUTO);
                    $('body').removeClass().addClass('crocodoc-pageflip');
                    break;
            }
        }

        viewer = Crocodoc.createViewer('.viewer', {
            url: url,
            layout: Crocodoc.LAYOUT_PRESENTATION
        });
        viewer.load();

        viewer.on('ready', function () {
            $(window).on('keydown', function (ev) {
                if (ev.keyCode === 37) {
                    viewer.scrollTo(Crocodoc.SCROLL_PREVIOUS);
                } else if (ev.keyCode === 39) {
                    viewer.scrollTo(Crocodoc.SCROLL_NEXT);
                } else {
                    return;
                }
                ev.preventDefault();
            });

            setMode('pop');
        });


    </script>
</body>
</html>
